<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>湍流分析</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
	</head>

	<body>
		<div id="app">
			<el-row >
				<el-col :span="8">
					<div id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
				<el-col :span="12">
					<div id="myChart1" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>
			
		</div>
		<script>
			new Vue({
				el:'#app',
				data:function(){
					return{
						data: ['1#','2#'],
						value:[120,220],
					}
				},
				mounted:function(){
					let myChart = echarts.init(document.getElementById('myChart'));
					let myChart1 = echarts.init(document.getElementById('myChart1'));
					let option = {
					    title: {
					        text: '平均湍流强度柱状图'
					    },
					    tooltip: {
					        trigger: 'axis'
					    },
					    legend: {
					        //data:['1#','2#','3#','4#']
					    },
					    grid: {
					        left: '8%',
					        right: '4%',
					        containLabel: true
					    },
					    toolbox: {
					    },
					    xAxis: {
					        type: 'category',
					        name:'机组编号',
					        nameLocation:'center',
					        nameGap:30,
									data: this.data
					    },
					    yAxis: {
					        type: 'value',
					        name:'平均湍流强度(%)',
					        nameLocation:'center',
					        nameGap:40,
					    },
					    series: [
					        {
					            type:'bar',
					            barWidth:50,
					            data:this.value,
					            itemStyle: {
											normal: {
												color:'#409EFF',
												label: {
													show: true, //开启显示
													position: 'top', //在上方显示
													textStyle: { //数值样式
														color: 'black',
														//fontSize: 16
													}
												}
											}
										}
					        }
					    ]
					};
					myChart.setOption(option);
					
					let option1 = {
					    title: {
					        text: '湍流强度-风速曲线图'
					    },
					    tooltip: {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['A级','B级','C级','1#','2#']
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        containLabel: true
					    },
					    toolbox: {
					    },
					    xAxis: {
					        type: 'category',
					        name:'风速[m/s]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					       	data: ['0','5','10','15','20','25']
					    },
					    yAxis: {
					        type: 'value',
					        name:'风速概率[%]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					    },
					    series: [
					    	{
					            name:'A级',
					            type:'line',
					            smooth: true,
					            stack: '总量',
					            symbol: "none",
            					areaStyle: {normal: {}},
					            data:[120, 132, 101, 134, 90, 230, 210]
					        },
					        {
					            name:'B级',
					            type:'line',
					            smooth: true,
					            stack: '总量',
					            symbol: "none",
            					areaStyle: {normal: {}},
					            data:[220, 182, 191, 234, 290, 330, 310]
					        },
					        {
					            name:'C级',
					            type:'line',
					            smooth: true,
					            stack: '总量',
					            symbol: "none",
            					areaStyle: {normal: {}},
					            data:[150, 232, 201, 154, 190, 330, 410]
					        },
					        {
					            name:'1#',
					            type:'line',
					            //stack: '总量',
					            data:[150, 232, 201, 154, 190, 330, 410]
					        },
					        {
					            name:'2#',
					            type:'line',
					            //stack: '总量',
					            data:[320, 332, 301, 334, 390, 330, 320]
					        }
					    ]
					};

					myChart1.setOption(option1)
				}
			})
		</script>
	</body>

</html>